<template>
    <div class="query-box">
        <el-from :model="queryBox">
            <el-row>
                <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="请输入用户名">
                    <template slot="prepend">用户名</template>
                  </el-input>
                </div>
                <div class="depart-box">
                  <div class="slect-title">一级部门</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">二级级部门</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          >
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">三级级部门</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
                <div class="depart-box">
                  <div class="slect-title">职务</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
                </div>
            </el-row>
            <el-row>
              <div class="depart-box">
                <div class="slect-title slect-title-no">角色类型</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </div>
                <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="请输入联系电话">
                      <template slot="prepend">联系电话</template>
                  </el-input>
                </div>
                <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="邮箱">
                      <template slot="prepend">请输入邮箱</template>
                  </el-input>
                </div>
               <div class="depart-box">
                  <el-input v-model="queryBox.name" placeholder="请输入真实姓名">
                      <template slot="prepend">真实姓名</template>
                  </el-input>
               </div>
               <div class="depart-box">
                  <div class="slect-title">状态</div>
                  <el-select v-model="queryBox.Value" filterable>
                      <el-option
                          v-for="item in queryBox.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
               </div>
            </el-row>
            <el-row>
              <div class="depart-box">
                <el-input v-model="queryBox.name" placeholder="请输入演示账号">
                  <template slot="prepend">演示账号</template>
                </el-input>
              </div>
            </el-row>
        </el-from>
         <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="oranmanagement:person:reset" type="primary" @click="queryReset" />
            <kt-button :label="$t('action.search')" perms="oranmanagement:person:search" type="primary"  />
        </div>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton"
export default {
    name:"QueryBox",
     components: {
        KtButton,
    },
    data(){
        return {
             queryBox: {
        name: "",
        options: [
          {
            value: 1,
            lable: "1"
          },
          {
            value: 2,
            lable: "2"
          }
        ],
        Value: ""
      },
        }
    },
    methods:{
        // 重置
        queryReset(){
            this.queryBox=''
        }
    }
}
</script>
<style lang='scss' scoped>
.query-box {
  overflow: hidden;
  width: 98%;
  margin: 0 auto;
}
.depart-box {
  float: left;
  display: flex;
  flex-direction: row;
  .slect-title {
    width: 28%;
    padding: 0 5%;
    float: left;
  }
  .el-input {
    width: 90%;
  }
  .el-select {
    width: 50%;
  }
}
.slect-title {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 80px;
  line-height: 37px;
  white-space: nowrap;
  font-size: 14px;
  display: inline-table;
  margin-right: -1%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.slect-title-no {
  margin-left: 1%;
}
.el-row {
  margin-top: 20px;
}
.query-box .el-input,
.query-box .el-select {
  margin-left: 1%;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.slect-title {
  float: left;
}
.from-btns {
  clear: both;
  margin: 30px 0;
}
.resetpassword{
  .resetpassword-pass{
    .el-input{
      width: 75.5%;
      float: left;
    }
    .el-button{
      float: left;
      margin-left: 5%;
    }
  }
}
</style>
<style>
.table-width .el-table_1_column_13 .cell {
  width: 100%;
}
.add-btns {
  display: flex;
  flex-direction: row;
  margin-bottom: 2%;
  margin-left: 1%;
}
</style>